Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: adding button icon to design system react #387

Merged
merged 7 commits into from
Feb 4, 2025

Conversation

georgewrmarshall
Copy link
Contributor

@georgewrmarshall georgewrmarshall commented Jan 29, 2025

Description

This PR adds ButtonIcon component to the design system react.

Key features include:

  1. Three size variants (sm, md, lg)
  2. Support for floating/contained style
  3. Inverse color mode for dark backgrounds
  4. Built-in accessibility with required aria labels
  5. Comprehensive test coverage
  6. Full Storybook documentation

The component is built on top of our existing ButtonBase component and integrates with our Icon system.

Related issues

Fixes: #387

Manual testing steps

  1. Run Storybook (yarn storybook)
  2. Navigate to React Components/ButtonIcon
  3. Test different configurations:
    • Try all size variants (sm, md, lg)
    • Toggle floating mode
    • Toggle inverse mode on dark background
    • Verify disabled state
    • Check hover and active states
    • Check controls
    • Check accessibility tests

Screenshots/Recordings

Before

N/A - New component

After

after720.mov

Pre-merge author checklist

  • I've followed MetaMask Contributor Docs
  • I've completed the PR template to the best of my ability
  • I've included tests (100% coverage for ButtonIcon component)
  • I've documented my code using JSDoc format
  • I've applied the right labels on the PR

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Sorry, something went wrong.

@georgewrmarshall georgewrmarshall marked this pull request as ready for review January 29, 2025 23:39
@georgewrmarshall georgewrmarshall requested a review from a team as a code owner January 29, 2025 23:39
Copy link
Contributor

@brianacnguyen brianacnguyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approved but lets not merge this until design is 100% done

isFloating && [
'rounded-full',
!isInverse && 'bg-icon-default text-background-default',
isInverse && 'text-icon-default bg-background-default',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Default isInverse + isFloating to the isFloating default

Suggested change
isInverse && 'text-icon-default bg-background-default',
isInverse && 'text-icon-default bg-background-default',

Comment on lines +37 to +41
isFloating && [
'rounded-full',
!isInverse && 'bg-icon-default text-background-default',
isInverse && 'bg-icon-default text-background-default',
],
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Continue with no hover for isFloating for now

@@ -27,8 +27,11 @@ export type { ButtonSecondaryProps } from './button-secondary';
export { ButtonTertiary, ButtonTertiarySize } from './button-tertiary';
export type { ButtonTertiaryProps } from './button-tertiary';

export { Button, ButtonVariant } from './button';
export { Button, ButtonSize, ButtonVariant } from './button';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding missing ButtonSize enum

Comment on lines +39 to +40
!isInverse && 'bg-icon-default text-background-default',
isInverse && 'bg-icon-default text-background-default',
Copy link
Contributor Author

@georgewrmarshall georgewrmarshall Feb 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updates isFloating and isInverse to default to isFloating.

This story has been updated to no longer show the isInverse, isFloating button to avoid confusion.

Screenshot 2025-02-03 at 11 01 35 AM

@georgewrmarshall georgewrmarshall force-pushed the feat/313/dsr-button-icon branch from 05159b4 to 01f3a09 Compare February 3, 2025 19:28
@brianacnguyen
Copy link
Contributor

It's good that you add a default aria label, but I wouldn't call that done since the string needs to be translated for localization

@georgewrmarshall georgewrmarshall merged commit eadea1f into main Feb 4, 2025
30 checks passed
@georgewrmarshall georgewrmarshall deleted the feat/313/dsr-button-icon branch February 4, 2025 16:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants